<template>
	<!--  :style="{ height: height + 'px' }" -->
	<view class="moment-card" @tap.stop="toDynamicDetail">
		<view class="moment-show">
			<view class="moment-card-head">
				<view class="face">
					<image class="face-image" :src="publisher.avatar" mode="aspectFill" @tap.stop="visitUserZone(publisher.user_id, null, publisher.last_identity)"></image>
					<image class="vip-sign" :src="publisher.vip_file"></image>
				</view>
				<view class="text">
					<view class="name">
						{{ publisher.nickName }}
						<image class="identity-sign" v-if="publisher.login_identity == 20" src="@/static/images/matchmaker/icon-sign.png" mode="aspectFit"></image>
					</view>
					<view class="sign"><sex-age-symbol :isMine="false" :sex="publisher.gender" :age="publisher.birth_age"></sex-age-symbol></view>
				</view>
			</view>
			<view class="moment-card-content">{{ content }}</view>
			<moment-media :fileList="files"></moment-media>
			<view class="moment-card-foot">
				<view class="text">{{ createDateString }}{{ addressStr ? '·' + addressStr : addressStr }}</view>
				<view class="tools">
					<view class="tools-item" :class="{ checked: isFavor }" @tap.stop="doFavor">
						<image class="item-icon" src="@/static/images/moment/icon-moment-favor.png" mode="aspectFit"></image>
						<view class="item-text">{{ favorCount }}</view>
					</view>
					<view class="tools-item" @tap.stop="doComment">
						<image class="item-icon" src="@/static/images/moment/icon-moment-comment.png" mode="aspectFit"></image>
						<view class="item-text">{{ commentCount }}</view>
					</view>
					<view class="more" @tap.stop="onToggleToolsPopup">
						<view class="more-dot"></view>
						<view class="more-dot"></view>
						<view class="more-dot"></view>
					</view>
				</view>
			</view>
			<view class="interaction">
				<view class="interaction-content">
					<view class="interaction-line comment" v-for="(item, index) in commentList" :key="index">
						<template v-if="item.to_comment_id == 0">
							<!-- 针对动态评论 -->
							<text class="user">{{ item.nickName }}</text>
							<text class="comment-item-colon">:</text>
							<text class="comment-item-content">{{ item.content }}</text>
						</template>
						<template v-else>
							<text class="user">{{ item.nickName }}</text>
							<text class="comment-item-text">回复</text>
							<text class="user">{{ item.to_nickName }}</text>
							<text class="comment-item-colon">:</text>
							<text class="comment-item-content">{{ item.content }}</text>
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 引入mescroll-mixins.js
import sexAgeSymbol from '@/components/custom/sex-age-symbol.vue';
import momentMedia from '@/components/custom/moment-media.vue';
import moment from '@/utils/Moment.js';
// import appShare, { closeShare } from '@/js_sdk/AppShare/share.js';
// #ifdef APP-PLUS
import { AppSharePopup } from '@/entity/AppSharePopup.class.js';
// #endif
import ComplaintTypeEnum from '@/utils/enum/ComplaintType.js';
export default {
	components: { sexAgeSymbol, momentMedia },
	props: {
		height: {
			type: Number,
			default: 0
		},
		momentObject: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	watch: {
		momentObject: {
			handler(newObject, oldObject) {
				this.moment_id = newObject.moment_id;
				this.files = newObject.file;
				this.publisher = newObject.publisher;
				this.content = newObject.content;
				this.addressStr = newObject.address_brief || newObject.address;
				this.favorCount = newObject.favor_count || 0;
				this.isFavor = !!Number(newObject.is_favor);
				this.commentCount = newObject.comment_count;
				this.commentList = newObject.comment;
				this.favorList = newObject.favor || [];
				const createTimeMoment = moment(newObject.create_time, 'YYYY-MM-DD HH:mm:ss');
				const todayMoment = moment();
				const createTimeValueOf = createTimeMoment.valueOf();
				const diffDays = todayMoment.diff(createTimeMoment, 'days');
				const diffHours = todayMoment.diff(createTimeMoment, 'hours');
				// console.log(createTimeMoment.format('YYYY年MM月DD日'))
				if (diffDays < 3) {
					this.createDateString = createTimeMoment.fromNow();
				} else if (createTimeMoment.year() == todayMoment.year()) {
					this.createDateString = createTimeMoment.format('MM月DD日');
				} else {
					this.createDateString = createTimeMoment.format('YYYY年MM月DD日');
				}
			},
			immediate: true,
			deep: true
		}
	},
	data() {
		return {
			moment_id: null,
			loaded: false,
			files: [],
			publisher: {},
			content: '',
			addressStr: '',
			favorCount: 0,
			isFavor: false,
			commentCount: 0,
			createDateString: '',
			canFavor: true,
			singleImageStyle: {},
			commentList: [],
			textareaFixedToBottom: 0,
			favorList: [],
			appSharePopup: null,
			noramlActionList: []
		};
	},
	mounted() {
		// #ifdef APP-PLUS
		const appActionList = [
			{
				icon: '/static/images/action/icon-action-report.png',
				text: '举报',
				index: 0,
				onClick: this.onClickAppSharePopupAction
			}
		];
		if (this.momentObject.user_id == this.userInfo.user_id) {
			appActionList.push({
				icon: '/static/images/action/icon-action-delete.png',
				text: '删除',
				index: 1,
				onClick: this.onClickAppSharePopupAction
			});
		}
		this.appSharePopup = new AppSharePopup({
			actionList: appActionList
		});
		// #endif
		// #ifndef APP-PLUS
		const noramlActionList = ['举报'];
		if (this.momentObject.user_id == this.userInfo.user_id) {
			noramlActionList.push('删除');
		}
		this.noramlActionList = noramlActionList;
		// #endif
	},
	beforeDestroy() {
		uni.$off('openToolsPopup', this.getCloseToolsPopupToken);
		uni.$off('openCommentPopup', this.getCloseCommentPopupToken);
	},
	methods: {
		previewPhoto(e) {
			uni.previewImage({
				current: e.currentTarget.dataset.index,
				urls: this.photoList,
				indicator: 'number',
				loop: true
			});
		},
		toDynamicDetail() {
			this.navigateTo({
				url: '/pageTip/detail/index?moment_id=' + this.moment_id
			});
		},
		doComment() {
			this.navigateTo({
				url: '/pageTip/detail/index?moment_id=' + this.moment_id + '&action=comment'
			});
		},
		doFavor() {
			if (this.canFavor) {
				this.toolsPopupStatus = false;
				this.canFavor = false;
				this.isFavor = !this.isFavor;

				if (this.isFavor) {
					this.favorCount = this.favorCount + 1;
					this.favorList = [{ user_id: this.userInfo.user_id, nickName: this.userInfo.nickName }, ...this.favorList];
				} else {
					this.favorCount = this.favorCount - 1;
					const favorList = this.favorList;
					const list = [];
					for (let i = 0; i < favorList.length; i++) {
						if (favorList[i].user_id != this.userInfo.user_id) {
							list.push(favorList[i]);
						}
					}
					this.favorList = list;
				}
				this.$u.api
					.doFavorToMoment(this.moment_id)
					.then(res => {
						this.canFavor = true;
					})
					.catch(e => {
						this.isFavor = !this.isFavor;
						this.canFavor = true;
						this.favorCount -= 1;
					});
			}
		},
		confirmComment(e) {},
		onToggleToolsPopup() {
			// #ifdef APP-PLUS
			this.appSharePopup.show();
			// #endif
			// #ifndef APP-PLUS
			uni.showActionSheet({
				itemList: this.noramlActionList,
				success: res => {
					this.onActionMore(res.tapIndex);
				}
			});
			// #endif
		},
		// #ifdef APP-PLUS
		onClickAppSharePopupAction(data) {
			this.appSharePopup.hide();
			this.onActionMore(data.index);
		},
		// #endif
		onActionMore(index) {
			if (index == 0) {
				uni.navigateTo({
					url: '/pageSupport/supplement/report?type=' + ComplaintTypeEnum.MOMENT.value + '&id=' + this.moment_id
				});
			} else {
				uni.showModal({
					title: '',
					content: '删除后将无法恢复该动态！',
					confirmText: '删除',
					success: e => {
						this.$u.api.delMoment(this.moment_id).then(res => {
							this.$emit('del', { moment_id: this.moment_id });
						});
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
.moment-card {
	padding: 30rpx 0 0;
	background-color: #fff;
	margin-bottom: 10rpx;
	.moment-show {
		padding: 0 32rpx 15rpx;
	}
	.moment-card-head {
		height: 88rpx;
		display: flex;
		align-items: center;
		position: relative;
		.face {
			width: 88rpx;
			border-radius: 88rpx;
			height: 88rpx;
			position: relative;
			.face-image {
				width: 88rpx;
				border-radius: 88rpx;
				height: 88rpx;
			}
			.vip-sign {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 40rpx;
				height: 40rpx;
			}
		}
		.text {
			margin-left: 13rpx;
			flex-direction: column;
			display: flex;
			height: 88rpx;
			justify-content: space-between;
			padding: 10rpx 0 6rpx 0;
			.name {
				height: 40rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: rgba(0, 0, 0, 1);
				line-height: 40rpx;
				display: flex;
				align-items: center;
				.identity-sign {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 78rpx;
					height: 32rpx;
					margin-right: 14rpx;
					bottom: 0;
					left: 0;
					border-radius: 6rpx;
					// background: #ffd5db;
					image {
						height: 32rpx;
						width: 74rpx;
						display: block;
					}
				}
			}
			.sign {
				display: flex;
			}
		}
	}
	.moment-card-content {
		margin-top: 28rpx;
		font-weight: 400;
		position: relative;
		font-size: 30rpx;
		color: #606266;
		line-height: 1.8;
		text-align: left;
	}
	.moment-card-media {
		margin-top: 18rpx;
		display: flex;
		flex-wrap: wrap;
		.photo {
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
			&:nth-child(-n + 3) {
				margin-top: 0;
			}
			&.single {
				width: 400rpx;
				height: auto;
			}
			.photo-image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		.video {
			video {
				width: 300rpx;
				height: 200rpx;
			}
		}
		.audio {
			.audio-player {
				min-width: 150rpx;
				height: 70rpx;
				background: rgba(251, 122, 142, 1);
				border-radius: 10rpx;
				position: relative;
				margin-left: 8rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				&::before {
					content: '';
					width: 0;
					height: 0;
					border-top: 20rpx solid rgba(251, 122, 142, 1);
					border-left: 20rpx solid transparent;
					position: absolute;
					left: -8rpx;
					top: 24rpx;
					transform: rotate(-135deg);
				}
				.audio-player-icon {
					width: 35rpx;
					height: 35rpx;
					margin-right: 10rpx;
				}
				.audio-player-text {
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					line-height: 40rpx;
					&::after {
						content: "''";
						font-style: italic;
						padding-left: 3rpx;
					}
				}
			}
		}
	}
	.moment-card-foot {
		margin-top: 29rpx;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.text {
			height: 30rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(151, 151, 151, 1);
			line-height: 30rpx;
			padding-right: 40rpx;
			@include ellipsis(1);
		}
		.tools {
			display: flex;
			align-items: center;
			position: relative;

			.tools-item {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				color: #f85962;
				padding: 10rpx 5rpx;
				margin-left: 10rpx;
				filter: grayscale(100%);
				filter: gray;
				opacity: 0.7;
				&.checked {
					color: rgba(248, 89, 98, 1);
					filter: none;
					opacity: 1;
				}
				.item-icon {
					width: 40rpx;
					height: 34rpx;
				}
				.item-text {
					font-size: 20rpx;
					font-weight: 400;
					color: inherit;
					line-height: 20rpx;
					margin-left: 4rpx;
				}
			}
			.more {
				width: 60rpx;
				height: 26rpx;
				background: #f8f8f8;
				border-radius: 14rpx;
				display: flex;
				padding: 0 13rpx;
				justify-content: space-between;
				align-items: center;
				margin-left: 6rpx;
				.more-dot {
					width: 6rpx;
					height: 6rpx;
					background: #f85962;
					border-radius: 3rpx;
				}
			}
		}
	}
}
.interaction {
	overflow: hidden;
	border-radius: 10rpx;
	.interaction-content {
		.interaction-line {
			background-color: #f3f4f7;
			padding: 10rpx 25rpx;
			line-height: 45rpx;
			font-size: 26rpx;
			color: $theme-main-color;
			.user {
				color: $theme-main-color;
				font-weight: 700;
				&.first {
					&::before {
						display: none;
					}
				}
			}
			&.comment {
				.comment-item-colon {
					padding: 0 8rpx;
				}
				.comment-item-colon,
				.comment-item-content {
					color: #666;
				}
			}
		}
	}
}
.fixed-comment {
	// position: fixed;
	margin-top: 15rpx;
	background-color: #fff;
	bottom: var(--window-bottom);
	width: 750rpx;
	left: 0;
	background-color: #f7f7f7;
	padding: 10rpx 20rpx;
	z-index: 100;
	.fixed-comment-textarea {
		min-height: 40rpx;
		background-color: #fff;
		width: 670rpx;
		border-radius: 6rpx;
		padding: 15rpx 20rpx;
		line-height: 40rpx;
		color: #191919;
	}
	.fixed-comment-textarea-placeholder {
		font-size: 28rpx;
		color: #aeaeae;
	}
}
.comment-bottom-view {
	width: 750rpx;
	height: 0rpx;
}
</style>
